<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../../lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        #myDiv {
            background-color: pink;
            width: 250px;
            height: 250px;
            display: none;
        }
    </style>

</head>

<body>
<input id="btn" type="button" value="显示DIV">
<div id="myDiv">
    This is a div;
</div>
</body>

</html>
<script type="text/javascript">
    var myDiv = $("#myDiv");
    $(function() {
        $("#btn").click(function(event) {
            // showDiv();//调用显示DIV方法
            $(myDiv).toggle();
            $(document).one("click",
                function() { //对document绑定一个隐藏Div方法
                    $(myDiv).hide();
                });

            event.stopPropagation(); //阻止事件向上冒泡
        });


        $(myDiv).click(function(event) {
            event.stopPropagation(); //阻止事件向上冒泡
        });
    });
    function showDiv() {
        $(myDiv).fadeIn();
    }
</script>
